<script>
import InteractModal from '../../public/interact-modal/interact-modal'
import Hazard from '../../info/land/hazard'

export default {
  components: {
    InteractModal,
    Hazard
  },
  props: {
    options: {
      type: Object,
      default: () => ({})
    }
  },
  data () {
    return {
      modalTitle: ''
    }
  },
  render (h) {
    return h('InteractModal', {
      class: 'GykjMap-hazard-modal',
      ref: 'modal',
      props: {
        title: this.modalTitle
      }
    }, [
      h('Hazard', { props: { isInit: false, ...this.options }, ref: 'info' })
    ])
  },
  methods: {
    showModal (feature) {
      const info = feature.get('content')

      this.modalTitle = info['code']
      this.$refs.modal.showModal()
      this.$refs.info.initData(info)
    }
  }
}
</script>

<style lang="scss" scoped>
.GykjMap-hazard-modal {
  width: 700px;
  height: 540px;
}
</style>
